<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function $(id){
            return document.getElementById(id);
        }

        function checkName(){
            //定义正则表达式
            var rex = /^[a-zA-Z\u4e00-\u9fa5]{2,}$/;
            //判断文本框内容是否匹配正则表达式
            if(rex.test($("userName").value)){
                $("nameSpan").innerHTML = "验证通过";
                $("nameSpan").style.color = "green";
                return true;
            }
            else{
                $("nameSpan").innerHTML = "姓名必须为两位以上的汉字或字母";
                $("nameSpan").style.color = "red";
                return false;
            }
        }

        function checkPhone(){
            var rex = /^1[3578]\d{9}$/;//(13|15|17|18)
            if(rex.test($("phone").value)){
                $("phoneSpan").innerHTML = "验证通过";
                $("phoneSpan").style.color = "green";
                return true;
            }
            else{
                $("phoneSpan").innerHTML = "电话必须以13、15、17、18开始的11位数";
                $("phoneSpan").style.color = "red";
                return false;
            }
        }

        function submitForm(){
            if(checkName() & checkPhone()) {
                //提交表单
                $("f1").submit();
            }
        }
    </script>
</head>
<body>
    <form action="add" id="f1">
        姓名：<input type="text" name="userName" id="userName" onblur="checkName()">
            <span id="nameSpan"></span><br>
        电话：<input type="text" name="phone" id="phone" onblur="checkPhone()">
            <span id="phoneSpan"></span><br>
        <input type="button" value="提交" onclick="submitForm()">
    </form>
</body>
</html>